The default position is static, and you cannot move sections when they are static.
Relative allows you to move sections using the commands – top, right, bottom & left. It moves based of its original position in the browser window Can use commands like “top: 50px” to move the section inwards from the top by 50 pixels and “top: -50px” outwards from the top its position. It does not remove elements from the document flow meaning that other elements will still act like it is there even if you have repositioned it 100 million miles away. Here we move from the top of the parent by 50px and the left of the parent by 500px.
Notice that the blocks can move outside of the parent element.
Absolute positioning, positions based on the borders of the parent element. You define which borders of the parent element are used based on which commands you use. For example, if you code “right: 50px” & “bottom: 0 px” then the child element will choose to move 50 pixels right from the left border of the parent element & 0 pixels upwards from the bottom of the parent element. It will end up sitting in the bottom left somewhere (depending on the size of the parent element). It gets removed from the document flow when repositioned.
Notice how the red box moved up to replace the position of the green box in this case. This is because the absolute positioning removes elements from the document flow.
Basically works the same as absolute positioning works, with the added feature which makes it move with a resized browser window.